<template>
	<view class="container">
		<view class="top-icon">
			<image :src="listdata.cat_big_pic" mode="" class="top-img"></image>
		</view>
		<view class="card">
			<view class="big-box">
				<view class="title">开锁</view>
				<view class="info-box" v-for="(item,index) in listdata.wap_content">
					<view class="name">{{item}}</view>
					<view class="text">100元/次</view>
				</view>
			</view>
		</view>
		<!--底部操作栏-->
		<view class="tui-operation">
			<view class="tui-operation-left tui-col-1">
				<view class="tui-operation-item" hover-class="opcity" :hover-stay-time="150">
					<tui-icon name="partake" color="#333" :size="22"></tui-icon>
					<text class="tui-operation-text tui-scale-small">分享</text>
				</view>
			</view>
			<view class="tui-operation-right tui-right-flex tui-col-7 tui-btnbox-4">
				<view class="tui-flex-1">
					<tui-button type="red" :plain="true" size="mini" @click="submit">电话咨询</tui-button>
				</view>
				<view class="tui-flex-1">
					<tui-button type="red" shape="square" size="mini" @click="openActionSheet">立即预约</tui-button>
				</view>
			</view>
		</view>
		<!--底部操作栏-->
		<tui-actionsheet :show="showActionSheet" :itemList="itemList" :tips="tips" @click="itemClick" @cancel="closeActionSheet"></tui-actionsheet>
	</view>
</template>

<script>
	import tuiIcon from "../../../appComponent/uni/icon/icon.vue"
	import tuiTag from "../component/tag/tag.vue"
	import tuiButton from "../component/button/button"
	import tuiActionsheet from "../component/actionsheet/actionsheet.vue"
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	// const getelevatorDetailds = () => {
	// 	common.post('HouseApi&a=equipment_info', {
	// 		village_id: _this.village_id,
	// 		map_type: 1,
	// 		qrcode_id: _this.qrcode_id,
	// 	}, data => {
	// 		console.log('++++', data)
	// 		_this.listdata = data.wisdom_qrcode;
	// 		_this.numlist = data.qrcode_list;
	// 		_this.map_type = data.map_type;
	// 	});
	// };
	const getGoodsinfo = () => {
		common.post('Appoint_new&a=detail', {
			appoint_id: _this.appoint_id,
		}, data => {
			console.log("nnnnnnn", data)
			_this.listdata= data.cat_info;
			// _this.commentlist = data.comment_list;
		});
	};
	export default {
		data() {
			return {
				listdata: {},
				numlist: {},
				village_id: 0,
				pigcms_id: 0,
				actcolor: '',
				btn_style: '',
				qrcode_id: '',
				map_type: '',
				collected: false,
				showActionSheet: false,
				tips: "下单电话",
				itemList:[{"text": "18895319138","color": "#2681f3"}],
				appoint_id:'',
			}
		},
		onShow() {
			// #ifdef H5
			common.hideWxShare()
			// #endif
		},
		onLoad(options) {
			_this = this;
			_this.appoint_id = options.appoint_id;
			console.log("wwwwwww",_this.appoint_id)
			// #ifdef H5
			console.log('准备跳小程序页', _this.id);
			common.webToMiniapp(_this.route, options, 'redirect')
			// #endif

			// common.setMainColor(_this, function(config) {
			// 	_this.actcolor = config.config.mobile_head_color
			// 	_this.btn_style = 'background-color: ' + _this.actcolor + ';box-shadow:0px 30rpx 30rpx -30rpx ' + _this.actcolor +
			// 		';';
			// 	const res = uni.getStorageSync('village_key');
			// 	if (res) {
			// 		_this.village_id = res.village_id;
			// 		_this.pigcms_id = res.pigcms_id;
			// 		_this.village_name = res.village_name;
			// 	};
				
			// });
			getGoodsinfo();
		},
		methods: {
			previewimage(url) {
				var imgs = [];
				var imgs = imgs.concat(url)
				console.log("66666666666", url)
				uni.previewImage({
					urls: imgs,
					success: function(res) {
						console.log('success', res)
					},
					fail: function(fail) {
						console.log('fail', fail)
					}
				})
			},
			collecting: function() {
				this.collected = !this.collected
			},
			submit(){
				
			},
			closeActionSheet: function() {
				this.showActionSheet = false
			},
			openActionSheet: function() {
				this.showActionSheet = true
			},
			itemClick: function(e) {
				let index = e.index;
				console.log("9999999999999",_this.itemList[index].text)
				if (index == 0) {
					uni.makePhoneCall({
						phoneNumber: _this.itemList[index].text
					})
					// this.showActionSheet = false;
					
					this.history = []
				}
			}
		},
		components: {
			tuiIcon,
			tuiTag,
			tuiButton,
			tuiActionsheet
		}
	}
</script>

<style>
	page {
		background: #FFFFFF;
	}

	.container {
		margin: 0;
		padding: 0;
	}

	.top-icon {
		margin: 20rpx;
		height: 350rpx;
		border-radius: 10rpx;
	}

	.top-img {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
	.card {
		margin: 30rpx;
		border-radius: 15rpx;
		overflow: hidden;
	}
	.title {
		font-size: 30rpx;
		font-weight: 700;
		line-height: 60rpx;
		background: #C0C0C0;
		padding-left: 20rpx;
	}
	.info-box {
		padding: 0rpx 20rpx;
		background: #F1F1F1;
		border-bottom: 2rpx solid #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 28rpx;
		color: #333333;
		line-height: 60rpx;
	}
	/*底部操作栏*/
	
	.tui-col-7 {
		width: 88.33333333%;
	}
	
	.tui-col-5 {
		width: 41.66666667%;
	}
	.tui-col-1 {
		width: 11.66666667%;
	}
	.tui-operation {
		width: 100%;
		height: 100rpx;
		/* box-sizing: border-box; */
		background: rgba(255, 255, 255, 0.98);
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 10;
		bottom: 0;
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}
	
	.tui-operation::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}
	
	.tui-operation-left {
		display: flex;
		align-items: center;
	}
	
	.tui-operation-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
	}
	
	.tui-operation-text {
		font-size: 22rpx;
		color: #333;
	}
	
	.tui-opacity {
		opacity: 0.5;
	}
	
	.tui-scale-small {
		transform: scale(0.9);
		transform-origin: center center;
	}
	
	.tui-operation-right {
		height: 100rpx;
		/* box-sizing: border-box; */
		padding-top: 0;
	}
	
	.tui-right-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.tui-btnbox-4 .tui-btn-class {
		width: 90% !important;
		display: block !important;
		font-size: 28rpx !important;
	}
	
	.tui-operation .tui-badge-class {
		position: absolute;
		top: -6rpx;
		/* #ifdef H5 */
		transform: translateX(50%)
			/* #endif  */
	}
	
	.tui-flex-1 {
		flex: 1;
	}
	.tui-icon-red {
		color: #ff201f;
	}
	/*底部操作栏*/
</style>
